<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item style="font-size: 18px"><i class="el-icon-view"></i>角色管理</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <el-input v-model="find.name" placeholder="角色名" class="handle-input mr10" disabled></el-input>
                <el-button type="primary" icon="el-icon-search" disabled>搜索</el-button>
                <el-button type="" icon="el-icon-edit" @click="OpenAuthority()">为角色添加权限</el-button>
                <el-button type="" icon="el-icon-plus" @click="addRole">添加新的角色</el-button>
                <el-button type="danger" icon="el-icon-delete" class="handle-del mr10" disabled>批量删除</el-button>
            </div>
            <!-- 显示 -->
            <el-table :data="tableData" border ref="multipleTable" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
                <!-- 权限 -->
                <el-table-column type="selection" width="50" align="center">
                </el-table-column>
                <!-- 角色名称 -->
                <el-table-column prop="rName" label="角色名称" width="150" align="center">
                </el-table-column>
                <!-- 角色描述 -->
                <el-table-column prop="rText" label="角色描述" align="center">
                </el-table-column>
                <!-- 状态 -->
                <el-table-column prop="status" label="状态" width="120" align="center">
                    <template slot-scope="scope">
                        <el-tag :type="scope.row.status == 0 ? 'danger' : scope.row.status == 1 ? 'success' : ''">
                            {{scope.row.status == 1 ? '启用' : '禁用'}}
                        </el-tag>
                    </template>
                </el-table-column>
                <!-- 操作 -->
                <el-table-column label="操作" width="200" align="center">
                    <template slot-scope="scope">
                        <el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button type="text" icon="el-icon-delete" style="color: red" @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- 添加角色弹出框 -->
        <el-dialog title="添加" :visible.sync="AddVisible" width="30%">
            <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="角色名称" prop="rName">
                    <el-input v-model="ruleForm.rName"></el-input>
                </el-form-item>
                <el-form-item label="角色描述" prop="rText">
                    <el-input v-model="ruleForm.rText"></el-input>
                </el-form-item>
                <el-form-item label="角色状态" prop="status">
                    <el-radio v-model="ruleForm.status" :label="1">启用</el-radio>
                    <el-radio v-model="ruleForm.status" :label="2">禁用</el-radio>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="AddVisible = false">取 消</el-button>
                <el-button type="primary" @click="AddRoles">确 定</el-button>
            </span>
        </el-dialog>
        <!--修改-->
        <el-dialog title="修改" v-if="updatePermission" :visible.sync="updatePermission" width="30%">
            <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="角色名称" prop="rName">
                    <el-input v-model="ruleForm.rName"></el-input>
                </el-form-item>
                <el-form-item label="角色描述" prop="rText">
                    <el-input v-model="ruleForm.rText"></el-input>
                </el-form-item>
                <el-form-item label="角色状态" prop="status">
                    <el-radio v-model="ruleForm.status" :label="1">启用</el-radio>
                    <el-radio v-model="ruleForm.status" :label="2">禁用</el-radio>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="updatePermission = false">取 消</el-button>
                <el-button type="primary" @click="upt()">确 定</el-button>
            </span>
        </el-dialog>
        <!--角色权限添加对话框-->
        <el-dialog title="添加角色权限" :visible.sync="AuthoritydialogFormVisible" width="30%">
            <el-tree :data="tableDataAuthority" show-checkbox default-expand-all node-key="pId" ref="tree" highlight-current :props="defaultProps" @check="handleRoleSelectionChange1">
            </el-tree>
            <div slot="footer" class="dialog-footer">
                <el-button @click="AuthoritydialogFormVisible = flase">取消</el-button>
                <el-button type="primary" @click="addRolePermission">确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
  
  <script>
import { rolelist, rolesadd, roledelete, addTreeAuthority, getTreeAuthority, getPer } from '../../api/role.js';
export default {
    data() {
        return {
            tableData: [],
            multipleSelection: [],
            multipleSelectionRole: [],
            //分页
            find:{name: undefined},
            tableDataAuthority: [],
            //角色权限添加对话框
            AuthoritydialogFormVisible: false,
            //角色修改
            updatePermission:false,
            //角色权限添加
            roleAuthority:
            {roleId: undefined,authorityId: undefined},
            AddVisible: false,
            ruleForm:
            {rName: '',rText: '',status: 1},
            rolePermission:
            {rId: '',pId: ''},
            defaultProps:
            {children: 'children',label: 'pTitle'}
        };
    },
    created() {
        this.GetRoleList();
    },
    methods: {
        GetRoleList() {
            rolelist(this.query).then((res) => {
                console.log(res);
                this.tableData = res.data;
            });
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        handleRoleSelectionChange1(data, node) {
            this.multipleSelectionRole = node.checkedKeys;
            // val.forEach(x=>{
            //     this.multipleSelectionRole = x.pId;
            // })
            //this.multipleSelectionRole = val;
            console.log('权限列表', this.multipleSelectionRole);
        },
        // 删除操作
        handleDelete(row) {
            // 二次确认删除
            // this.$confirm('确定要删除吗？', '提示', {
            //     type: 'warning'
            // });
            if (confirm('确认删除吗？')) {
                roledelete(row.rId).then((res) => {
                    if (res.code == 200) {
                        this.$message.success('删除成功');
                        this.GetRoleList();
                    }
                });
            }
        },
        //添加触发按钮
        addRole() {
            this.AddVisible = true;
        },
        AddRoles() {
            let data = {
                rName: this.ruleForm.rName,
                rText: this.ruleForm.rText,
                status: this.ruleForm.status == true ? 1 : 0
            };
            //添加角色
            rolesadd(data).then((res) => {
                if (res.code == 200) {
                    this.$message.success('添加角色成功');
                    this.GetRoleList();
                    this.AddVisible = false;
                }
            });
        },
        addRolePermission() {
            console.log(this.multipleSelectionRole.constructor === Array); //true
            console.log('角色id', this.multipleSelection.map((x) => x.rId).toString());
            let RoleAdd = {
                rId: this.multipleSelection.map((x) => x.rId).toString(),

                pId: this.multipleSelectionRole.join(',')
            };
            //添加用户角色
            addTreeAuthority(RoleAdd).then((res) => {
                if (res.code == 200) {
                    this.$message.success('角色添加权限成功');
                    this.AuthoritydialogFormVisible = false;
                    this.GetRoleList();
                }
            });
        },
        //权限修改
        handleEdit(index, row) {
            console.log("123",index, row);
            this.updatePermission = true;
            getPer(row.rId).then((res) => {
                console.log('反填数据', res);
                this.ruleForm = res.data;
            });
        },
        //修改确认
        upt() {
            this.$refs["editForm"].validate((valid) => {
            if (valid) {
                updatePermission(this.ruleForm).then((res) => {
                    console.log(res);
                    if (res.code == 200) {
                        this.$message.success('修改成功');
                        this.form = Object.assign({}, this.defaultformValue)  //将表单对象初始化清空
                        this.updatePermission = false;
                        this.GetData();
                    } else {
                        this.$message.success(res.message);
                    }
                });
            }
            else{}
            });
        },
        //权限列表
        getAuthority() {
            //获取权限数据
            getTreeAuthority().then((res) => {
                // console.log('权限列表:', res);
                this.tableDataAuthority = res.data;
                console.log('权限', this.tableDataAuthority);
                //this.FindRoleAuthority(); //把选中的角色ID所拥有的权限进行反填
            });
        },
        FindRoleAuthority() {
            getPer(this.multipleSelection.map((x) => x.rId)).then((res) => {
                this.$refs.tree.setCheckedKeys(res.data);
            });
        },
        //打开权限
        OpenAuthority() {
            if (this.multipleSelection === undefined || this.multipleSelection.length === 0 || this.multipleSelection.length > 1) {
                this.$message({
                    message: '请选择一个角色',
                    type: 'warning'
                });
                return;
            } else {
                this.rolePermission.rId = this.multipleSelection.map((x) => x.rId);
                this.rolePermission.rId = this.rolePermission.rId;
                this.AuthoritydialogFormVisible = true;
                this.getAuthority();
            }
        }
    }
};
</script>

<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 120px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}

.table {
    width: 100%;
    font-size: 14px;
}

.red {
    color: #ff0000;
}

.mr10 {
    margin-right: 10px;
}

.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
</style>